// 留言板组件
// 根据传递的信息，渲染评论列表
// 提供用户提交评论的表单

<template>
  <div class="MessageArea-content">
    <MessageForm v-on="$listeners" />
    <MessageList
      :list="list"
      :title="title"
      :isLoading="isLoading"
      :subtitle="subtitle"
    />
    <div class="loading" v-loading="isLoading"></div>
  </div>
</template>

<script>
import MessageList from "./MessageList";
import MessageForm from "./MessageForm";
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "评论列表",
    },
    subtitle: {
      type: String,
      default: "(0)",
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    MessageList,
    MessageForm,
  },
};
</script>

<style lang="less" scoped>
.loading {
  height: 100px;
  position: relative;
}
</style>